<template>
  <div class="index">
    <a-form :model="formData" ref="refForm" :rules="rules" auto-label-width>
      <a-form-item label="名称" field="name" show-colon>
        <a-input v-model="formData.name"></a-input>
      </a-form-item>
      <a-form-item label="状态" field="status" show-colon>
        <a-switch
          v-model="formData.status"
          :checked-value="1"
          :unchecked-value="2"
          size="medium"
        >
          <template #checked> 启动 </template>
          <template #unchecked> 停用 </template>
        </a-switch>
      </a-form-item>
      <a-form-item label="描述" field="note" show-colon>
        <a-textarea
          v-model="formData.note"
          show-word-limit
          :max-length="50"
          :auto-size="{
            minRows: 4
          }"
        ></a-textarea>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { cloneDeep } from 'lodash';
import type { Interview } from '@/apis/management/performance/baseSetting/assessmentSetting/type';
import { useVModel } from '@vueuse/core';
import { interviewRecordRepeat } from '@/apis/management/performance/baseSetting/assessmentSetting/index';

const props = withDefaults(
  defineProps<{
    templateData: Interview;
  }>(),
  {}
);
const emit = defineEmits(['update:templateData']);

const formData = useVModel(props, 'templateData', emit);
const validateName = async (value: any, cb: any) => {
  if (value === props.templateData.cname) return;
  const res = await interviewRecordRepeat({ name: `${formData.value.name}` });
  if (res?.code === 400) {
    cb('名称已存在!');
  }
};
const rules = reactive({
  name: [
    {
      required: true,
      message: '请输入'
    },
    {
      validator: validateName
    }
  ]
});
const refForm = ref();
const validate = async () => {
  const check = await refForm.value.validate();
  return check;
};

defineExpose({ validate });
</script>

<style lang="less" scoped>
.index {
  width: 800px;
  margin: 0 auto;
}
</style>
